<!DOCTYPE html>
<html>
<head>
<title>Feynman Diagram Fig. 3.22</title>
</head>
<body>
<canvas id="feynmanCanvas" width="500" height="320"></canvas>
<script>
    const canvas = document.getElementById('feynmanCanvas');
    const ctx = canvas.getContext('2d');

    // Style
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2.5;
    ctx.font = '22px "Times New Roman"';

    // Helper function to draw an arrow on a line segment
    // pos determines the position along the line (0=start, 1=end)
    function drawArrowOnLine(x1, y1, x2, y2, pos = 0.5, size = 12) {
        const t = pos;
        const midX = x1 + t * (x2 - x1);
        const midY = y1 + t * (y2 - y1);
        const angle = Math.atan2(y2 - y1, x2 - x1);
        
        ctx.save();
        ctx.translate(midX, midY);
        ctx.rotate(angle);
        ctx.beginPath();
        // The arrow points towards (x2, y2)
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, -size * 0.4);
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, size * 0.4);
        ctx.stroke();
        ctx.restore();
    }

    // Coordinates
    const x_start = 50, x_end = 450;
    const v1_x = 180, v2_x = 320;
    const y_center = 145;
    const y_offset = 80;
    const y_top = y_center - y_offset;
    const y_bottom = y_center + y_offset;

    // Draw frame
    ctx.lineWidth = 3;
    ctx.strokeRect(20, 20, 460, 250);
    ctx.lineWidth = 2.5;

    // Draw fermion lines (solid)
    ctx.beginPath();
    // Incoming e'
    ctx.moveTo(x_start, y_top);
    ctx.lineTo(v1_x, y_center);
    // Incoming e-
    ctx.moveTo(x_start, y_bottom);
    ctx.lineTo(v1_x, y_center);
    // Outgoing f
    ctx.moveTo(v2_x, y_center);
    ctx.lineTo(x_end, y_top);
    // Outgoing f-bar
    ctx.moveTo(v2_x, y_center);
    ctx.lineTo(x_end, y_bottom);
    ctx.stroke();

    // Draw arrows
    // Arrow for e' (incoming)
    drawArrowOnLine(x_start, y_top, v1_x, y_center);
    // Arrow for e- (incoming)
    drawArrowOnLine(x_start, y_bottom, v1_x, y_center);
    // Arrow for f (outgoing)
    drawArrowOnLine(v2_x, y_center, x_end, y_top);
    // Arrow for f-bar (outgoing)
    drawArrowOnLine(v2_x, y_center, x_end, y_bottom);

    // Draw mediator phi (dashed)
    ctx.save();
    ctx.setLineDash([7, 7]);
    ctx.beginPath();
    ctx.moveTo(v1_x, y_center);
    ctx.lineTo(v2_x, y_center);
    ctx.stroke();
    ctx.restore();

    // Draw labels
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.textAlign = 'left';
    
    // e'
    ctx.fillText("e'", 80, 55);
    
    // e-
    ctx.fillText("e⁻", 80, 240);

    // f
    ctx.fillText("f", 405, 55);

    // f-bar
    const fbar_x = 405;
    const fbar_y = 240;
    ctx.fillText("f", fbar_x, fbar_y);
    const f_metrics = ctx.measureText('f');
    const overbar_y = fbar_y - f_metrics.actualBoundingBoxAscent - 1;
    ctx.beginPath();
    ctx.moveTo(fbar_x, overbar_y);
    ctx.lineTo(fbar_x + f_metrics.width, overbar_y);
    ctx.lineWidth = 1.8;
    ctx.stroke();
    ctx.lineWidth = 2.5;

    // u(p) and v(q)
    ctx.font = '24px "Times New Roman"';
    ctx.fillText("u(p)", 430, 85);
    ctx.fillText("v(q)", 430, 220);

    // phi(k) - U+03D5 is φ (the phi symbol used in the image)
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.fillText("φ", 240, y_center - 15);
    ctx.font = '24px "Times New Roman"';
    ctx.fillText("(k)", 240 + 15, y_center - 15);


    // Fig. 3.22
    ctx.font = '20px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.fillText("Fig. 3.22", 250, 300);

</script>
</body>
</html>